
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现tab面板</title>
</head>
<body>
    <div class="tab">
        <dl>
            <dt data-action="toggle">在线教程</dt>
            <dd data-action="hidden">houdnren.com</dd>
        </dl>
        <dl>
            <dt data-action="toggle">开源软件</dt>
            <dd data-action="hidden">hdmcs.com</dd>
        </dl>
    </div>
</body>
</html>

<script>
    class HD{
        constructor (el){
            this.el = el;
            el.addEventListener('click',this.handle.bind(this));
        }
        handle(){
            const action = event.target.dataset.action;
            if(action) this[action]();
        }

        hidden(){
            event.target.hidden = true;
        }

        toggle(){
            this.el.querySelectorAll(`[data-action='hidden']`).forEach((e) => (e.hidden = true));
            event.target.nextElementSibling.hidden = '';
        }
    }
    new HD(document.querySelector('.tab'));
</script>